<template>
<div class="profile-main">
 <el-row style="height: 100%">
   <el-col :span="4" style="height: 100%" >
     <div class="left">
       <div class="card profile-card" style="height: 160px">
         <el-avatar :size="60" :src="loginUserInfo.avatar"/>
         <p class="nick-name">{{loginUserInfo.nickName}}</p>
       </div>
       <div class="card profile-tab" style="margin-top: 10px;width: 100%;padding-right: 0">
       <el-tabs tab-position="left"  v-model="route.path"  @tab-click="clickTab">
         <el-tab-pane label="个人资料" name="/profile/info"></el-tab-pane>
         <el-tab-pane label="账号安全" name="/profile/account" ></el-tab-pane>
         <el-tab-pane label="我的收藏" name="/profile/collection"></el-tab-pane>
         <el-tab-pane label="我的评论" name="/profile/comment"></el-tab-pane>
       </el-tabs>
       </div>
     </div>
   </el-col>
   <el-col :span="19" style="margin-left: 15px;height: 100%;">
       <router-view/>
   </el-col>
 </el-row>
</div>
</template>
<script setup>
import {useRouter,useRoute} from "vue-router";
const router = useRouter()
const route = useRoute()
import {useLoginStore} from "@/store/index.js";
const {getUserLoginInfo} = useLoginStore()
const loginUserInfo = getUserLoginInfo()
const clickTab = (TabsPaneContext)=>{

  router.push(TabsPaneContext.paneName)
}
</script>



<style scoped lang="less">
.profile-main{
  width: 80%;
  height: calc(100vh - 100px);
  margin: 10px auto 0 auto;
  padding: 20px;
}
.left{
  height: 100%;
}
.profile-card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .nick-name{
    margin-top: 10px;
  }
}
.card{
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.72);
}

:deep(.el-tabs--left .el-tabs__header.is-left){
  width: 100%;
}
:deep(.el-tabs--left .el-tabs__item.is-left){
  justify-content: center;
  height: 60px;
}
:deep(.el-tabs--left .el-tabs__active-bar.is-left){
  width: 3px;
}
:deep(.el-tabs--left .el-tabs__nav.is-left, .el-tabs--left .el-tabs__nav.is-right, .el-tabs--right .el-tabs__nav.is-left, .el-tabs--right .el-tabs__nav.is-right){
  width: 100%;
}
</style>